<template>
	<view v-if="on" class="m-back-top" :class="show===true ? 'active' : ''"
		:style="`background-color: ${bgColor}; border-color: ${borColor};`" @click="toTop" @longpress="longpress">
		<view class="in">
			<view class="img" :style="bgimage"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			url: {
				type: String,
				default: '/uni_modules/mc-ui/static/image/backTop.png'
			},
			bgColor: {
				type: String,
				default: '#ffffff',
			},
			borColor: {
				type: String,
				default: '#cccccc',
			},
			color: {
				type: String,
				default: '#2b2b2b',
			}
		},
		data() {
			return {
				on: true,
				show: false,
			};
		},
		computed: {
			bgimage() {
				let str = this.url;
				return 'background-image: url("' + str + '")';
			},
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			scroll(e) {
				if (this.hide === true) {
					return false;
				}
				if (e.scrollTop > 600) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			longpress() {
				this.on = false;
			},
		}
	}
</script>

<style>
	.m-back-top {
		position: fixed;
		z-index: 999999;
		color: #fff;
		width: 80rpx;
		height: 80rpx;
		bottom: calc(var(--window-bottom) + 60px);
		right: 14rpx;
		background-color: #fff;
		border: 1px solid #ccc;
		box-sizing: border-box;
		border-radius: 50%;
		opacity: 0;
		transform: scale(0);
		transition-duration: 0.3s;
		transition-property: opacity|transform;
		transition-timing-function: ease-out;
	}

	.m-back-top.active {
		opacity: 1;
		transform: scale(1);
	}

	.m-back-top .in {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.m-back-top .img {
		width: 54rpx;
		height: 54rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>